<template>
        <div id="placeholder" style="height:880px;"></div>
</template>
<script>
    import { getFileInfoById, getPaperClassify } from '@/api/work.js'
    import { getFileType } from '@/utils/index.js'
    import { mapGetters } from 'vuex'
    export default {
      name: "OnlineOffice",
      data(){
          return{
            fileInfo: null,
            pagerId: null, // 套红模板ID
            pagerclassify: null, // 模板信息
            previewType: 0, // 文件预览类型
            checkedStatus: null, // 文件检查类型
            isTemplate: false, // 是否是套红模板
          }
      },
      computed: {
        ...mapGetters([
            'name',
            'id'
        ])
    },
      mounted() {
          document.getElementsByTagName("title")[0].innerText = '';
        const {fileId, previewType, pagerId, isTemplate = false, checkedStatus,url,filename,key } = this.$route.query
        this.previewType = previewType
        this.checkedStatus = checkedStatus
        this.pagerId = pagerId
        this.isTemplate = isTemplate
        if(url){
            const fileInfo = {
                filename,
                key,
                url
            }
            this.fileInfo = fileInfo
            this.handOfficeFile()
        }else{
            this.requestFileInfo(fileId)
        }
    },
    methods: {
        // 生成在线文档
        async handOfficeFile(){
            let { filename, key, url } = this.fileInfo
            const fileType = getFileType(url, '.')
            const documentType ={
                'text': ['doc', 'docx'],
                'text-pdf': ['pdf'],
                'spreadsheet': ['xls', 'xlsx'],
                'presentation': ['pptx']
            }
            let type = 'text'
            for(let key in documentType){
                if(documentType[key].includes(fileType)){
                    type = key
                }
            }
            let sceenWidth = document.body.clientWidth
            const screenType = sceenWidth >= 500 ? 'desktop' : 'mobile'
            console.log('cccccccc',screenType)
            var config = {
                "type":screenType,
                "editorConfig": {
                    "lang": "zh-CN",
                    "mode": "edit",
                    "customization":{
                        "forcesave":"true",
                        "chat": false,
                        "help": false,
                        "about": false
                    },
                    user:{
                        id: this.id,
                        name: this.name
                    }
                },
                "document": {
                    // "key": key,
                    "title": filename,
                    "url": url,//这里填写文档的url路径
                    "permissions":{
						"edit": this.checkedStatus ? false : true,
						"review": true,
					},
                },
                "documentType": type,
                "lang": "zh-CN",
            };
            if(this.previewType === '1'){
                if(this.isTemplate) {
                    const res = await getPaperClassify(this.pagerId)
                    this.pagerclassify = res.data
                    config.document.url = res.data.file
                }
                config.document.key = key
                config.editorConfig.callbackUrl = process.env.VUE_APP_IMAGE_URL + "/api/Work/onlyofficeCallBackUrl/" + key
            }
            if(this.previewType === '0'){
                config.editorConfig.mode = 'view'
            }
            var docEditor = new DocsAPI.DocEditor("placeholder", config);
          },
          // 请求模板信息
          requestPagerclassify(id){
            getPaperClassify(id).then(
                res => {
                    this.pagerclassify = res.data
                }
            )
          },
          // 请求文件信息
           requestFileInfo(id){
            getFileInfoById(id).then(async (res) =>{
                this.fileInfo = res.data
                this.handOfficeFile()
            })
          }
      },
    }
</script>